<template>
  <div class="box" v-if="listInfo">
    <header
      v-if="listInfo.tracks"
      :style="{ backgroundImage: 'url(' + listInfo.tracks[0].al.picUrl + ')' }"
    >
      <div class="up">
        <div class="up_back" @click="backRanking">
          <img class="auto-img" src="../assets/back.png" alt="" />
        </div>
        <div>
          <div><img class="auto-img" src="" alt="" /></div>
          <div><img class="auto-img" src="" alt="" /></div>
        </div>
      </div>
      <div class="info">
        <h2>{{ listInfo.name }}</h2>
        <p>{{ updateTime }}</p>
      </div>
      <div class="down">
        <div>
          <div class="down-icon">
            <img class="auto-img" src="../assets/subscribe.png" alt="" />
          </div>
          <span>{{ count(listInfo.subscribedCount) }}</span>
        </div>
        <div>
          <div class="down-icon">
            <img class="auto-img" src="../assets/comment.png" alt="" />
          </div>
          <span>{{ count(listInfo.commentCount) }}</span>
        </div>
        <div>
          <div class="down-icon">
            <img class="auto-img" src="../assets/shareBlack.png" alt="" />
          </div>
          <span>{{ count(listInfo.shareCount) }}</span>
        </div>
      </div>
    </header>
    <main>
      <div class="play_all">
        <div class="all_icon">
          <img class="auto-img" src="../assets/playing.png" alt="" />
        </div>
        <p>
          <span
            class="all_text"
            @click="
              $emit('play-all', {
                id: listInfo.tracks[0].id,
                type: 'list',
                listInfo: listInfo,
              })
            "
            >播放全部</span
          ><span class="all_count">({{ len }})</span>
        </p>
      </div>
      <ListDetailMain
        :songObj="listInfo"
        @play-audio="$emit('play-audio', $event)"
        @play-list="$emit('play-list', $event)"
        :playing="playing"
        :songId="songId"
      />
    </main>
  </div>
</template>

<script>
import ListDetailMain from "@/components/ListDetailMain.vue";
export default {
  components: {
    ListDetailMain,
  },
  props: {
    playing: Boolean,
    songId: Number,
  },
  data() {
    return {
      listInfo: {},
      len: null,
    };
  },
  watch: {
    listInfo() {
      let len = 0;
      this.listInfo.tracks.filter(() => len++);
      this.len = len;
    },
  },
  methods: {
    backRanking() {
      this.$router.push({ path: "/ranking" });
    },
    count(num) {
      if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      } else {
        return num;
      }
    },
  },
  created() {
    this.axios
      .get(
        "https://apis.netstart.cn/music/playlist/detail?id=" +
          this.$route.query.id
      )
      .then((res) => {
        this.listInfo = res.data.playlist;
      });
  },
  computed: {
    updateTime() {
      let now = new Date();
      let t = this.listInfo.trackUpdateTime;
      return now.getMonth(t) + 1 + "月" + now.getDate(t) + "日更新";
    },
  },
};
</script>

<style lang="less" scoped>
.auto-img {
  width: 100%;
  height: auto;
  display: block;
}
header {
  width: 100vw;
  height: 25vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: center;
  position: relative;
  padding: 2vw;
  margin-bottom: 3vh;
  .info {
    // margin-top:10%;

    h2 {
      color: white;
      font-size: 35px;
      font-weight: bold;
      letter-spacing: 5px;
    }
    p {
      color: #e8e6e1;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .up {
    .up_back {
      width: 8vw;
    }
  }
  .down {
    display: flex;
    justify-content: space-around;
    border-radius: 10vw;
    background: white;
    width: 80vw;
    height: 5vh;
    font-size: 12px;
    position: absolute;
    bottom: -2.5vh;
    left: 10vw;
    box-shadow: 0 1px 5px 0 #999;

    & > div {
      display: flex;
      width: 25vw;
      justify-content: center;
      line-height: 5vh;
      text-align: center;
      align-items: center;

      .down-icon {
        width: 18px;
        margin-right: 5px;
        line-height: 5vh;
        // margin-bottom: 0.5vh;
      }

      //   &::after{
      //       content: " | ";
      //       margin-left:8vw;
      //   }
      //   &:last-of-type{
      //       &::after{
      //         content: "";
      //       }
      //   }
    }
  }
}
main {
  .play_all {
    padding: 3vw 3vw 0 3vw;
    display: flex;
    align-items: center;
    .all_icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: red;
      //   margin-right: 3vw;
    }
    .all_text {
      margin: 0 2vw 0 3vw;
    }
    .all_count {
      color: #b5b5b5;
    }
  }
}
</style>